<template>
	<pro-table ref="protable" :loadDataUrl="loadDataUrl" rowKey="id" :columns="columns" :isRowSelection="true" @selectedRowChange="onSelectChange">
		<!-- 这些是 table中插槽  end -->
		<a-space slot="operation" slot-scope="{ text, record, index }"><a-button size="small" type="primary" @click="editConfig(record)">配置</a-button></a-space>
		<template slot="name" slot-scope="{ text, record, index }">
			<img :src="fileUrl + text" v-if="record.mode == 1" style="max-width: 200px; max-height: 200px;"/>
			<a-tooltip placement="topLeft" :title="text" v-else>{{ text }}</a-tooltip>
		</template>
		<!-- 新增或者编辑组件 -->
		<add-config-modal ref="addConfigModal" @ok="handlerRefresh(0)"></add-config-modal>
	</pro-table>
</template>

<script>
import { rowSelection } from '@/mixins'; //列表页面的一些公用方法
import addConfigModal from './module/addConfigModal'; //新增或编辑组件
import { api } from '@/api/index.js';
const columns = [
	{
		title: '类型',
		dataIndex: 'type',
		key: 'type',
		ellipsis: true
	},
	{
		title: 'Code',
		dataIndex: 'code',
		key: 'code',
		ellipsis: true
	},
	{
		title: '说明',
		dataIndex: 'note',
		key: 'note',
		ellipsis: true
	},
	{
		title: '内容',
		dataIndex: 'name',
		key: 'name',
		scopedSlots: { customRender: 'name' }
	},
	{
		title: '操作',
		key: 'operate',
		dataIndex: 'operate',
		scopedSlots: { customRender: 'operation' },
		align: 'center',
		width: 100
	}
];
export default {
	name: 'configllist',
	mixins: [rowSelection],
	data() {
		return {
			columns: columns,
			filter: {},
			loadDataUrl: api.getConfig, //查询列表接口，请在 api/index.js中配置
			fileUrl: 'https://apps.guoyamba.com/'
		};
	},
	components: { addConfigModal },
	filters: {},
	methods: {
		/* 刷新列表当前页 */
		handlerRefresh(type) {
			this.$refs.protable.handlerRefresh(type);
		},
		/* 编辑 /添加*/
		editConfig(record) {
			this.$refs.addConfigModal.add(record);
		}
	}
};
</script>

<style></style>
